Map 1
FlexTabs
  name:
    FlexTabs
  description:
    An advanced, flexible tabs/tab manager
  user_stories:
    - As a user I would like to see a list of tabs so I can toggle between content
    - As a user I would like the option to rename a tab
    - As a user I would like the option to re-order the tabs using drag/drop
    - As a user I would like the option to add new tabs to the list
    - As a user I would like the option to have a dropdown menu on my tabs so I can perform custom actions about that tab
    - As a user if I have more tabs than the container can fit, I would like my tabs to be a small carousel that I can use to toggle left/right to see hidden tabs
    - As a developer I would like to style my tabs
    - As a developer I would like to replace my tab containers
  schema:
    props
      -
        name:
          name
        type:
          string
        description:
          The name of the tab list
      -
        name:
          tabs
        type:
          Array<{ id:string, name:string, caption:string, icon:string, isActive:string, customAction:() => void, style: React.CSSProperties() }>
        description:
          The list of tabs to show
      -
        name:
          enableTabDropdowns
        type:
          boolean
        description:
          Whether or not the tabs have a dropdown menu of actions
      -
        name:
          enableContextMenu
        type:
          boolean
        description:
          Whether or not the user can trigger the tab action dropdown via right-click
      -
        name:
          tabActions
        type:
          Array<{ id:string, label:string, icon:string, onSelect: () => void }>
        description:
          The list of actions that are avaiable for each tab to take (will show in the dropdown)
      -
        name:
          canRename
        type:
          boolean
        description:
          Whether or not the tabs can be renamed
      -
        name:
          canDrag
        type:
          boolean
        description:
          Whether or not the tabs can be dragged/re-ordered
      -
        name:
          overflow
        type:
          enum(HIDDEN, CAROUSEL)
        description:
          The action to take when there are more tabs than the container permits
      -
        name:
          canAdd
        type:
          boolean
        description:
          Whether or not an add button is showing that allows the creation of more tabs
      -
        name:
          componentWrapper
        type:
          JSX.Element
        description:
          The component to use (instead of the default) to wrap each tab item
      -
        name:
          style
        type:
          React.CSSProperties
        description:
          The style to apply to the tab container
      -
        name:
          tabComponent
        type:
          JSX.Element
        description:
          The component to use (instead of the default) to replace each tab item
      -
        name:
          vertical
        type:
          boolean
        description:
          Whether the tabs should appear vertically or not
    events
      -
        name:
          onTabSwitch()
        type:
          () => void
        description:
          Triggers when the tab is switched
      -
        name:
          onTabRename()
        type:
          () => void
        description:
          Triggers when the tab is renamed
      -
        name:
          onTabDelete()
        type:
          () => void
        description:
          Triggers when the tab is deleted
      -
        name:
          onTabCreate()
        type:
          () => void
        description:
          Triggers when a tab is created
    methods
      -
        name:
          switchTab()
        type:
          () => void
        description:
          Switches the tab from one to another
  tests:
    Rendering
      - Should render the component in the dom
      - Should render a list of tabs in the dom that number the same as the number of tabs in the tabs array prop
      - Should render each tab with a caption that matches the tab item associated with that tab in the tabs array prop
      - Should render each tab with an icon (if one is present) that matches the tab item associated with that tab in the tabs array prop
      - Should render the tab as "active" it the tab in the tabs array prop has the isActive property set to true
      - Should render a dropdown of actions where the number of actions match the number of items in the tabActions prop
      - Should render a dropdown of actions on each tab if the enableTabDropdowns prop is set to true
      - Should render a dropdown of actions that are activated on right-click if the enableContextMenu prop is set to true
      - Should not permit renaming if the canRename prop is false
      - Should not permit re-ordering if the canDrag prop is false
      - Should not permit adding new tabs if the canAdd prop is false
      - Should render the tabs as a carousel when the number of tabs exceed the number that can fit on the screen
      - Should render the tabs normally with the overflow tabs hidden if the overflow prop is set to HIDDEN
      - Should render the component in the componentWrapper prop if one is provided
      - Should render the component in the tabComponent prop if one is provided
      - Should render the same number of tabComponent props as the amount of tabs in the tabs array prop
      - Should render the tabs as vertical if the vertical prop is set to true
    Events
      - Should trigger the onTabSwitch() event when the tab is switched
      - Should trigger the onTabRename() event when the tab is renamed
      - Should trigger the onTabDelete() event when the tab is deleted
      - Should trigger the onTabCreate() event when a tab is created
      - Should trigger the onSelect() action in the tab action prop if the tab dropdown action is selected
    Methods
      - Should switch the tab from one to another
    Hooks
      - Should trigger the onComponentRender("FlexTabs") plugin hook when the component is being rendered
      - Should trigger the onListItems("TabList") when the tab list is being generated
      - Should trigger the onListItems("TabActions") plugin hook when the tab actions are being generated
      - Should trigger the onEventTrigger("TabSwitch") plugin hook when a tab is switched
      - Should trigger the onEventTrigger("TabRename") plugin hook when a tab is renamed
      - Should trigger the onEventTrigger("TabDelete") plugin hook when a tab is deleted
      - Should trigger the onEventTrigger("TabCreate") plugin hook when a tab is created